<!--
  智慧社区管理系统 - 费用详情弹窗组件
  @author Wu.Liang
  @date 2024-12-21
-->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="费用详情"
    width="700px"
    :close-on-click-modal="false"
  >
    <div v-if="feeData" class="fee-detail">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="账单号">{{ feeData.feeNo }}</el-descriptions-item>
          <el-descriptions-item label="费用类型">{{ getFeeTypeText(getFeeType(feeData)) }}</el-descriptions-item>
          <el-descriptions-item label="社区">{{ feeData.communityName }}</el-descriptions-item>
          <el-descriptions-item label="楼栋">{{ feeData.buildingName }}</el-descriptions-item>
          <el-descriptions-item label="房号">{{ feeData.roomNumber }}</el-descriptions-item>
          <el-descriptions-item label="业主">{{ feeData.householdName }}</el-descriptions-item>
          <el-descriptions-item label="账单月份">{{ feeData.billingMonth }}</el-descriptions-item>
          <el-descriptions-item label="到期日期">{{ feeData.dueDate }}</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 费用信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>费用信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="费用金额">
            <span class="amount">¥{{ feeData.feeAmount?.toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="已缴金额">
            <span class="amount">¥{{ feeData.paidAmount?.toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="未缴金额">
            <span class="amount unpaid">¥{{ feeData.unpaidAmount?.toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="缴费状态">
            <el-tag
              :type="getStatusType(feeData.paymentStatus)"
              :effect="getStatusEffect(feeData.paymentStatus)"
            >
              {{ getStatusText(feeData.paymentStatus) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="缴费方式" v-if="feeData.paymentMethod">
            {{ getPaymentMethodText(feeData.paymentMethod) }}
          </el-descriptions-item>
          <el-descriptions-item label="缴费时间" v-if="feeData.paymentTime">
            {{ feeData.paymentTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 表读数信息（仅燃气费和水电费显示） -->
      <el-card
        v-if="showMeterInfo"
        class="detail-card"
        shadow="never"
      >
        <template #header>
          <div class="card-header">
            <span>表读数信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="表号">{{ getMeterNumber(feeData) }}</el-descriptions-item>
          <el-descriptions-item label="上次读数">{{ getPreviousReading(feeData) }}</el-descriptions-item>
          <el-descriptions-item label="本次读数">{{ getCurrentReading(feeData) }}</el-descriptions-item>
          <el-descriptions-item label="用量">{{ getUsage(feeData) }}</el-descriptions-item>
          <el-descriptions-item label="单价">¥{{ getUnitPrice(feeData)?.toFixed(2) }}</el-descriptions-item>
          <el-descriptions-item label="计算方式">用量 × 单价</el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 备注信息 -->
      <el-card v-if="feeData.remark" class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>备注信息</span>
          </div>
        </template>
        <div class="remark-content">{{ feeData.remark }}</div>
      </el-card>

      <!-- 时间信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>时间信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建时间">{{ feeData.createTime }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ feeData.updateTime }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          v-if="feeData?.paymentStatus !== 1 && feeData?.paymentStatus !== 'PAID'"
          type="success"
          @click="handlePay"
        >
          缴费
        </el-button>
        <el-button
          v-if="feeData?.paymentStatus !== 1 && feeData?.paymentStatus !== 'PAID'"
          type="warning"
          @click="handleReminder"
        >
          催缴
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { PropertyFee, SanitationFee, GasFee, UtilityFee } from '../types/property'

// Props
interface Props {
  modelValue: boolean
  feeData: PropertyFee | SanitationFee | GasFee | UtilityFee | null
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'pay': [fee: PropertyFee | SanitationFee | GasFee | UtilityFee]
  'reminder': [fee: PropertyFee | SanitationFee | GasFee | UtilityFee]
}>()

// 计算属性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const showMeterInfo = computed(() => {
  if (!props.feeData) return false
  return 'meterNumber' in props.feeData && props.feeData.meterNumber
})

// 工具函数
const FEE_TYPE_TEXT_MAP: Record<number | string, string> = {
  0: '物业费',
  1: '卫生费',
  2: '水费',
  3: '电费',
  4: '燃气费',
  PROPERTY_FEE: '物业费',
  SANITATION_FEE: '卫生费',
  WATER_FEE: '水费',
  ELECTRICITY_FEE: '电费',
  GAS_FEE: '燃气费',
  WATER: '水费',
  ELECTRICITY: '电费'
}

const getFeeType = (fee: PropertyFee | SanitationFee | GasFee | UtilityFee): number | string => {
  if ('feeType' in fee && fee.feeType !== undefined) {
    return fee.feeType
  }
  if ('utilityType' in fee && fee.utilityType) {
    return fee.utilityType
  }
  return 'UNKNOWN'
}

const getFeeTypeText = (feeType: number | string) => {
  return FEE_TYPE_TEXT_MAP[feeType] || feeType
}

const getMeterNumber = (fee: PropertyFee | SanitationFee | GasFee | UtilityFee): string => {
  if ('meterNumber' in fee) {
    return fee.meterNumber
  }
  return ''
}

const getPreviousReading = (fee: PropertyFee | SanitationFee | GasFee | UtilityFee): number => {
  if ('previousReading' in fee) {
    return fee.previousReading
  }
  return 0
}

const getCurrentReading = (fee: PropertyFee | SanitationFee | GasFee | UtilityFee): number => {
  if ('currentReading' in fee) {
    return fee.currentReading
  }
  return 0
}

const getUsage = (fee: PropertyFee | SanitationFee | GasFee | UtilityFee): number => {
  if ('usage' in fee) {
    return fee.usage
  }
  return 0
}

const getUnitPrice = (fee: PropertyFee | SanitationFee | GasFee | UtilityFee): number => {
  if ('unitPrice' in fee) {
    return fee.unitPrice
  }
  return 0
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'UNPAID': '未缴费',
    'PAID': '已缴费',
    'PARTIAL': '部分支付',
    'OVERDUE': '已逾期'
  }
  return statusMap[status] || status
}

const getStatusType = (status: string) => {
  const typeMap: Record<string, string> = {
    'UNPAID': 'info',
    'PAID': 'success',
    'PARTIAL': 'warning',
    'OVERDUE': 'danger'
  }
  return typeMap[status] || 'info'
}

const getStatusEffect = (status: string) => {
  const effectMap: Record<string, string> = {
    'UNPAID': 'plain',
    'PAID': 'plain',
    'PARTIAL': 'plain',
    'OVERDUE': 'dark'
  }
  return effectMap[status] || 'plain'
}

const getPaymentMethodText = (method: string) => {
  const methodMap: Record<string, string> = {
    'WECHAT': '微信支付',
    'ALIPAY': '支付宝',
    'BANK_CARD': '银行卡',
    'CASH': '现金'
  }
  return methodMap[method] || method
}

// 事件处理
const handleClose = () => {
  dialogVisible.value = false
}

const handlePay = () => {
  if (props.feeData) {
    emit('pay', props.feeData)
  }
}

const handleReminder = () => {
  if (props.feeData) {
    emit('reminder', props.feeData)
  }
}
</script>

<style scoped>
.fee-detail {
  max-height: 600px;
  overflow-y: auto;
}

.detail-card {
  margin-bottom: 16px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  font-weight: 600;
  color: #303133;
}

.amount {
  font-weight: 600;
  color: #67c23a;
}

.amount.unpaid {
  color: #f56c6c;
}

.remark-content {
  padding: 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #606266;
  line-height: 1.6;
}

.dialog-footer {
  text-align: right;
}
</style> 